<template>
	<div class="body" ref="scrollBody" @scroll="debouncedScroll">
		<div style="height: 66px"></div>
		<div class="container">
			<div class="swiper">
				<template v-if="slideList.length > 0">
					<ElCarousel :interval="4000" type="card" height="200px">
						<ElCarouselItem v-for="(item,index) in slideList" :key="index">
							<div class="image" :style="'background-image: url(\''+ config.imgPath + item.pic +'\')'">
							</div>
						</ElCarouselItem>
					</ElCarousel>
				</template>
			</div>
			<div class="sub-title">
				<span>游戏资讯</span>
			</div>
			<div class="sub-content">
				<div class="news-list">
					<div class="more" @click="toPage('https://www.ali213.net/news/')">更多&gt;</div>
					<div v-for="(item,index) in newsList" :key="index">
						<div class="news-box">
							<div class="cover" :style="'background-image: url(\''+ config.imgPath + item.pic + '?x-oss-process=image/resize,w_500,limit_0' +'\')'"></div>
							<div class="detail">
								<div class="title">{{item.title}}</div>
								<div class="desc">{{item.title}}</div>
								<div class="bottom">
									<span class="date"><i class="iconfont history">&#xe622;</i> {{methods.formatDate(item.create_time,'yyyy-MM-dd hh:mm')}}</span>
									<span class="author">发布: 绯村剑心</span>
								</div>
							</div>
						</div>
						<div class="divider-line"></div>
					</div>
				</div>
				<div class="game-cate">
					<div class="game-cate-title">
						<span>游戏专题</span>
					</div>
					<div class="game-cate-list">
						<div class="game-cate-box" v-for="(item,index) in gameList" :key="index" @click="toPage(item.url)">
							<div class="cover" :style="'background-image: url(\'' + config.imgPath + item.pic + '?x-oss-process=image/resize,w_500,limit_0\')'"></div>
							<div class="title">{{item.title}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="sub-title">
				<span>程序博客</span>
			</div>
			<div class="blog-content">
				<div class="more" @click="$router.push('/code')">更多&gt;</div>
				<div class="blog-list">
					<div class="blog-box" v-for="(item,index) in articleList" :key="index" @click="toNewPage('/codedetail',{article_id:item.id})">
						<div class="cover" :style="'background-image: url(\''+ config.imgPath + item.pic + '?x-oss-process=image/resize,w_500,limit_0' +'\')'"></div>
						<div class="cate"><span>{{item.cate_name}}</span></div>
						<div class="title">{{item.title}}</div>
					</div>
				</div>
			</div>
		</div>
		<i class="iconfont rocket" :class="{rocketGo:rocketGo}" @click="goTop" v-show="rocketShow">&#xe633;</i>
		<Footer></Footer>
	</div>
</template>
<script>
import {defineComponent} from "vue"
export default defineComponent({name:'home'})
</script>
<script setup>
import { ElCarousel,ElCarouselItem } from 'element-plus'
import Footer from "../components/Footer.vue"
import request from "../utils/request";
import "element-plus/lib/theme-chalk/el-icon.css"
import {onActivated, onMounted, onUnmounted, ref} from "vue";
import router from "../router";
import _ from "lodash";
import {useStore} from "vuex";
import Methods from "../utils/Methods";
const store = useStore()

const rocketGo = ref(false)
const rocketShow = ref(false)
const scrollBody = ref(null)
let scrollTop = 0
const debouncedScroll = _.debounce(() => {
	scrollTop = scrollBody.value.scrollTop
	if(scrollTop > 600) {
		rocketShow.value = true
	}else {
		rocketShow.value = false
	}
},300)

const newsList = ref([])
const articleList = ref([])
const slideList = ref([])
const gameList = ref([
	{id:1,title:'艾尔登法环',pic:'static/game/eldenring.jpg',url:'https://www.ali213.net/zt/eldenring/'},
	{id:2,title:'刺客信条:英灵殿',pic:'static/game/yinglingdian.webp',url:'https://www.ali213.net/zt/acvalhalla/'},
	{id:3,title:'最终幻想7:重制版',pic:'static/game/ff7.jpg',url:'https://www.ali213.net/zt/ff7re/'},
])
const getSlideList = () => {
	request.post('/blog/home/slideList',{}).then(res => {
		slideList.value = res.data
	}).catch(err => {
		console.log(err)
	})
}
const getNewsList = () => {
	request.post('/blog/home/newsList',Methods.obj2Form({pageIndex:1,pageSize:5})).then(res => {
		newsList.value = res.data.list
	}).catch(err => {
	    console.log(err)
	})
}
const getArticleList = () => {
	request.post('/blog/home/articleList',Methods.obj2Form({pageIndex:1,pageSize:6,recommend:1})).then(res => {
		articleList.value = res.data.list
	}).catch(err => {
		console.log(err)
	})
}
const toPage = (url) => {
	window.open(url,'_blank')
}
const toNewPage = (path,query) => {
	let routeData = router.resolve({
		query: query,
		path:path
	});
	window.open(routeData.href, '_blank');
}
const goTop = () => {
	rocketGo.value = true
	setTimeout(() => {
		rocketShow.value = false
		rocketGo.value = false
		scrollBody.value.scrollTop = 0
	},600)

}
onMounted(() => {
	getSlideList()
	getNewsList()
	getArticleList()
})
onActivated(() => {
	scrollBody.value.scrollTop = scrollTop
	store.commit("setHeaderTab",0)
})
onUnmounted(() => {
	// console.log('onUnmounted home')
})
</script>
<style scoped lang="scss">
@import "../assets/aliiconfont/iconfont.css";
	.history {
		font-size: 14px;
	}
	.swiper {
		margin: 15px 0;
		width: 100%;
		min-height: 220px;
	}
	.el-carousel__item .image {
		width: 100%;
		height: 200px;
		background-position: center center;
		background-size: cover;
	}
	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}
	.el-carousel__item:nth-child(2n + 1) {
		background-color: #d3dce6;
	}
	.sub-title {
		margin: 15px 0;
		text-align: center;
		span {
			color: #333333;
			font-size: 18px;
			font-weight: bold;
		}
	}
	.sub-content {
		display: flex;
		justify-content: space-between;
		min-height: 750px;
		.news-list {
			flex: 1;
			margin-right: 15px;
			background-color: rgba(17, 17, 17, 0.75);
			box-shadow: 0 3px 7px 0 rgb(0 0 0 / 35%);
			padding: 15px;
			box-sizing: border-box;
			color: #efefef;
			font-size: 14px;
			.more {
				padding:0 30px 0 15px;color: #efefef;text-align: right;font-size: 16px;cursor: pointer;
			}
			.news-box {
				display: flex;
				padding: 10px 0;
				cursor: pointer;
				.cover {
					width: 180px;
					height: 120px;
					border-radius: 3px;
					background-position: center center;
					background-size: cover;
				}
				.detail {
					flex: 1;
					margin-left: 15px;
					display: flex;
					text-align: left;
					flex-direction: column;
					justify-content: space-between;
					.title {
						font-size: 16px;
					}
					.desc {
						padding-left: 32px;
						color: #cfcfcf;
					}
					.bottom {
						.date {
							margin-right: 15px;
						}
						.author {

						}
					}
				}
			}
			.divider-line {
				height: 0;
				border-bottom: 1px solid rgba(200,200,200,0.1);
			}
		}
		.game-cate {
			width: 350px;
			flex-shrink: 0;
			background-color: rgba(17,17,17,0.75);
			box-shadow: 0 3px 7px 0 rgb(0 0 0 / 35%);
			.game-cate-title {
				height: 50px;
				font-size: 18px;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 5px;
				color: #efefef;
			}
			.game-cate-box {
				width: 100%;
				border-radius: 3px;
				background-color: #fff;
				box-shadow: 0 3px 7px 0 rgb(255 255 255 / 35%);
				overflow: hidden;
				margin-bottom: 5px;
				.cover {
					height: 200px;
					background-position: center center;
					background-size: cover;
				}
				.title {
					margin: 10px 0;
					color: #333333;
					text-align: left;
					padding-left: 15px;
				}
			}
		}
	}
	.blog-content {
		width:100%;
		background-color: rgba(17, 17, 17, 0.75);
		box-shadow: 0 3px 7px 0 rgb(0 0 0 / 35%);
		//min-height: 750px;
		.more {
			padding:15px 30px 0 15px;color: #efefef;text-align: right;cursor: pointer;
		}
		.blog-list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 15px;
			.blog-box {
				width: 32.5%;
				border-radius: 3px;
				overflow: hidden;
				background-color: #fff;
				margin-bottom: 15px;
				text-align: left;
				cursor: pointer;
				.cover {
					width: 100%;
					height: 0;
					padding-bottom: 45%;
					border-radius: 3px;
					background-position: center center;
					background-size: cover;
				}
				.cate {
					margin: 5px;
					span {
						padding: 3px 10px;
						margin: 5px;
						border-radius: 3px;
						font-size: 14px;
						color: #94774c;
						background-color: #f7f5ec;
					}
				}
				.title {
					margin: 15px;
				}
			}
		}

	}
	.rocket {
		position: fixed;
		right: 100px;
		bottom:200px;
		font-size: 75px;
		cursor: pointer;
		transform: translate(0, 0);
		transition: all 0.6s cubic-bezier(0.5,0.1,0.8,0.2);
		&:hover {
			text-shadow: 0 0 10px #69e0ff, 0 0 20px #69e0ff, 0 0 40px #69e0ff, 0 0 60px #69e0ff, 0 0 80px #69e0ff;
			color:#fff;
			//color: #fff;
		}
	}
	.rocketGo {
		color:#69e0ff;
		transform: translate(0, -1200px);
		text-shadow: 0 0 10px #69e0ff, 0 0 20px #69e0ff, 0 0 40px #69e0ff, 0 0 60px #69e0ff, 0 0 80px #69e0ff,0 10px 10px #69e0ff, 0 20px 20px #69e0ff, 0 40px 40px #69e0ff, 0 60px 60px #69e0ff, 0 80px 80px #69e0ff, 0 100px 100px #69e0ff, 0 120px 120px #69e0ff;
	}

</style>
